<template>
  <div class="pageWrap">
    <div class="pageTableInner">
      <div class="infoSearchWrap" v-if="$store.state.btnMenuIds.indexOf(61)>-1">
        <div class="infoSearchOne">
          <el-row :gutter="20">
            <div style="float: right;margin-right: 10px;">
              <addtask @getrowsInfo="getrowsInfo"></addtask>
            </div>
          </el-row>
        </div>
      </div>
      <div class="tableContainer" :style="$store.state.btnMenuIds.indexOf(61)>-1?'top:75px;':'top:0px;'">
        <div class="tableInner" ref="tableInner" style="margin-bottom: 500px;">
          <el-table
            ref="multipleTable"
            :data="rows"
            :span-method="objectSpanMethod"
            stripe
            :height="tableHeight"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column
              label="企业名称"
              prop="enterpriseName"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              label="退出步骤"
              prop="id"
              show-overflow-tooltip>
            </el-table-column>

            <el-table-column
              v-for="(item,index) in fileList"
              :key="index"
              :label="item.fileName"
            >
              <template v-if="scope.row.list" slot-scope="scope">
                <span v-show="scope.$index%3==0" style="color: #3975FE;cursor: pointer;"
                      @click="downLoadXml(scope.row.downloadList[index].downloadPath)">
                    {{scope.row.list[index]}}
                </span>
                <span v-show="scope.$index%3!=0">
                   {{scope.row.list[index]}}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="信息编辑">
              <template slot-scope="scope">
                <span v-show="scope.$index%3==0&&scope.row.exitStatus!=1">
                <addBtn v-if="$store.state.btnMenuIds.indexOf(197)>-1" @getrowsInfo="getrowsInfo" :infoList="scope.row.downloadList"
                        :enterpriseNo="scope.row.enterpriseNo"></addBtn>
                  <el-tooltip :visible-arrow="false" class="item" effect="dark" content="确认退出" placement="top-start">
             <i @click='handleSure(scope.row)' v-if="$store.state.btnMenuIds.indexOf(161)>-1" class="iconfont icon-queren2" style="margin-left: 10px;"></i>
          </el-tooltip>

                <i @click='handlerowDelete(scope.row)' v-if="$store.state.btnMenuIds.indexOf(58)>-1" class="iconfont icon-shanchu" style="margin-left: 10px;"></i>
                  </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

  </div>
</template>

<script>


  import addBtn from './addBtn.vue';
  import addtask from './addtask.vue';
  export default {
    props: [],
    data(){
      return {
        tableHeight: 400,
        rows: [
          {id: "完成情况（附件）"},
          {id: "完成时间"},
          {id: "操作人员"},],
        spanArr: [],
        fileList: [
          {fileName: "提前30日书面通知", fileType: 6},
          {fileName: "社会公示", fileType: 7},
          {fileName: "押金退还", fileType: 8},
          {fileName: "车辆及相关设施清退", fileType: 9},
          {fileName: "车辆备案注销", fileType: 10},
        ],
      }
    },
    components: {
      addBtn,
      addtask
    },
    created(){
      this.getrowsInfo()
    },
    mounted(){
      this.$nextTick(() => {
        //表格高度
        this.tableHeight = document.querySelector(".pageWrap").clientHeight - 120
      })
    },
    methods: {
      //下载模板
      downLoadXml(url){
        window.location.href = url
      },
      handleSure(row){
        this.$confirm('确认退出企业 “' + row.enterpriseName + '” , 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.post(process.env.API_HOST + `/enterprise/submitExit?`, {"id": row.itemId})
            .then(response => {
              const result = response.data
              if (result.code === 200) {
                this.$message({
                  type: 'success',
                  message: '退出成功!'
                });
                this.getCompanies()
                this.getrowsInfo()
              }
            })
        }).catch(() => {

        });
      },
      getCompanies(){
        this.axios.post(process.env.API_HOST + `/enterprise/selectEnterpriseList`, {
          enterpriseType: '1',
          enterpriseStatus: "0"
        })
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              let companiess = []
              result.result.forEach(item => {
                companiess.push({
                  "enterpriseId": item.enterpriseId,
                  "enterpriseNo": item.enterpriseNo,
                  "enterpriseName": item.enterpriseAlias,
                  "enterpriseAlias": item.enterpriseAlias ? item.enterpriseAlias : item.enterpriseName,
                  count: 0,
                  color: item.color,
                })
              })
              this.$store.commit("getCompanies", companiess)
              localStorage.setItem('getCompanies', JSON.stringify(companiess));
            }
          })

      },
      handlerowDelete(row){
        this.$confirm('确认删除 “' + row.enterpriseName + '” 的退出任务列表 , 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.post(process.env.API_HOST + `/enterprise/deleteExit?`, {"id": row.itemId})
            .then(response => {
              const result = response.data
              if (result.code === 200) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.getrowsInfo()
              }
            })
        }).catch(() => {

        });
      },
      objectSpanMethod({row, column, rowIndex, columnIndex}) {
        if (columnIndex === 0) {
          const _row = this.spanArr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
      },

      //获取所有信息
      getrowsInfo(){
        this.axios.post(process.env.API_HOST + `/enterprise/selectExitList`, {})
          .then(response => {
            let result = response.data
            if (result.code == 200) {
              let arr = []
              this.rows = []
              result.result.forEach((item, key) => {
                arr[key] = [
                  {
                    id: "完成情况（附件）",
                    itemId: item.id,
                    enterpriseNo: item.enterpriseNo,
                    exitStatus: item.exitStatus,
                    enterpriseName: item.enterpriseName,
                    downloadList: [],
                    list: []
                  },
                  {id: "完成时间", enterpriseNo: item.enterpriseNo, list: []},
                  {id: "操作人员", enterpriseNo: item.enterpriseNo, list: []},]
                item.fileList.forEach(item1 => {

                  arr[key][0].list[item1.fileType - 6] = item1.fileName
                  arr[key][0].downloadList[item1.fileType - 6] = {
                    downloadPath: item1.downloadPath,
                    fileType: item1.fileType,
                    fileName: item1.fileName
                  }
                  arr[key][1].list[item1.fileType - 6] = item1.operateTime
                  arr[key][2].list[item1.fileType - 6] = item1.operateName
                })
              })
              arr.forEach(item => {
                this.rows = this.rows.concat(item)
              })
              this.spanArr = this.getSpanArr(this.rows, "enterpriseNo")

            }
          })

      },

    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .pageWrap
    page()


</style>
